<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>风行融媒体 - 文件管理</title>
  <link rel="stylesheet" href="../styles/common.css">
  <link rel="stylesheet" href="../styles/main.css">
</head>
<body>
  <div class="app-container">
    <!-- 标题栏 -->
    <div class="title-bar">
      <div class="app-icon">
        <span>📁</span>
        <span>FTP Rush</span>
      </div>
      <div class="controls">
        <button id="cloud-sync-btn" title="云同步">
          <svg t="1761036139862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" width="19" height="19"><path d="M806.7072 470.528A290.816 290.816 0 0 0 252.16 371.4048a217.5488 217.5488 0 0 0-9.8304 428.1344 149.1456 149.1456 0 0 0 37.0176 4.352h504.4224a167.8336 167.8336 0 0 0 167.7824-167.7824c1.0752-82.7904-62.1056-154.6752-144.896-165.5808z m-44.6464 44.6464a26.2656 26.2656 0 0 0 19.6096 7.6288h4.352a113.3056 113.3056 0 0 1 0 226.6112H280.5248a114.3808 114.3808 0 0 1-26.1632-3.2768 164.1984 164.1984 0 0 1 19.6096-324.6592 27.3408 27.3408 0 0 0 22.9888-17.408 237.3632 237.3632 0 0 1 458.6496 84.992v3.2768c-1.0752 10.9056 1.0752 17.408 6.5536 22.8864z" p-id="5279" fill="#515151"></path><path d="M489.6768 557.6704a23.1936 23.1936 0 0 0-30.72 0l-27.2384 27.2384V458.5472a21.8112 21.8112 0 1 0-43.5712 0v126.3616l-27.2384-27.2384a23.1936 23.1936 0 0 0-30.72 0 21.0432 21.0432 0 0 0 0 30.72l64.256 64.256c1.0752 1.0752 2.2016 1.0752 3.2768 2.2016s2.2016 1.0752 3.2768 2.2016c1.0752 0 2.2016 1.0752 3.2768 1.0752h10.9056c1.0752 0 2.2016-1.0752 3.2768-1.0752a22.784 22.784 0 0 0 6.5536-4.352l64.256-64.256a21.0432 21.0432 0 0 0 0-30.72zM670.72 508.672l-64.4608-64.3072-1.0752-1.0752c-1.0752 0-1.0752-1.0752-2.2016-1.0752s-1.0752-1.0752-2.2016-1.0752-1.0752-1.0752-2.2016-1.0752-1.0752 0-2.2016-1.0752h-13.056c-1.0752 0-1.0752 0-2.2016 1.0752a1.0752 1.0752 0 0 0-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752l-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752L510.3616 508.672a21.5552 21.5552 0 0 0 30.72 30.72L568.32 512v126.3616a21.8112 21.8112 0 0 0 43.5712 0V512l27.2384 27.2384a21.0432 21.0432 0 0 0 30.72 0 20.48 20.48 0 0 0 1.0752-30.72z" p-id="5280" fill="#515151"></path></svg>
        </button>
        <button id="minimize-btn">−</button>
        <button id="maximize-btn">□</button>
        <button id="close-btn">×</button>
      </div>
    </div>

    <!-- 菜单栏 -->
    <div class="menu-bar">
      <div class="menu-item">文件</div>
      <div class="menu-item">远程</div>
      <div class="menu-item">视图</div>
      <div class="menu-item">编辑</div>
      <div class="menu-item">功能</div>
      <div class="menu-item">队列</div>
      <div class="menu-item">帮助</div>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
      <button class="toolbar-btn" id="choose-local-dir-btn" title="选择本地目录（可切换磁盘）">💾</button>
      <button class="toolbar-btn" id="refresh-btn" title="刷新">🔄</button>
      <button class="toolbar-btn" id="stop-btn" title="停止">⏹</button>
      <div class="toolbar-separator"></div>
      <button class="toolbar-btn" id="upload-btn" title="上传"><img src="../assets/upload.svg" alt="上传" style="width: 20px; height: 20px;"></button>
      <button class="toolbar-btn" id="download-btn" title="下载"><img src="../assets/dow.svg" alt="下载" style="width: 20px; height: 20px;"></button>
      <button class="toolbar-btn" id="new-folder-btn" title="新建文件夹">📁</button>
      <button class="toolbar-btn" id="delete-btn" title="删除">🗑️</button>
      <div class="toolbar-separator"></div>
      <span class="toolbar-label">协议:</span>
      <select class="toolbar-input" style="flex:0; width:180px;" disabled>
        <option>FTP - File Transfer Protocol</option>
      </select>
      <span class="toolbar-label">站点:</span>
      <input type="text" class="toolbar-input" id="site-status" value="未连接" readonly style="flex:0; width:150px;">
      <span class="toolbar-label">主机:</span>
      <input type="text" class="toolbar-input" id="host-display" value="drive.kbin.cc:21" readonly style="flex:0; width:150px;">
      <div style="flex:1;"></div>
      <span class="toolbar-label">用户:</span>
      <input type="text" class="toolbar-input" id="user-display" readonly style="flex:0; width:120px;">
      <button class="toolbar-btn" id="settings-btn" title="设置" style="margin-left:8px;">⚙️</button>
      <button class="toolbar-btn" id="notifications-btn" title="通知">🔔</button>
      <button class="toolbar-btn" id="logout-btn" title="退出登录">🚪</button>
    </div>

    <!-- 主内容区 -->
    <div class="content">
      <!-- 主面板区域 -->
      <div class="main-panels">
        <!-- 本地文件面板 -->
        <div class="file-panel">
          <div class="panel-header">
            <div class="panel-tab active">本地</div>
            <button class="panel-tab-add">+</button>
          </div>
          <div class="file-list-header">
            <div class="header-col name">文件名 ▲</div>
            <div class="header-col size">文件大小</div>
            <div class="header-col date">最后修改</div>
          </div>
          <div class="panel-body">
            <div class="tree" id="local-tree"></div>
            <div class="file-list" id="local-files">
              <div class="file-item">
                <span class="file-item-icon">📁</span>
                <span class="file-item-name">..</span>
                <span class="file-item-size"></span>
                <span class="file-item-date"></span>
              </div>
            </div>
          </div>
        </div>

        <!-- 远程文件面板 -->
        <div class="file-panel">
          <div class="panel-header">
            <div class="panel-tab active">远程</div>
            <button class="panel-tab-add">+</button>
          </div>
          <div class="file-list-header">
            <div class="header-col name">文件名 ▲</div>
            <div class="header-col size">文件大小</div>
            <div class="header-col date">最后修改</div>
          </div>
          <div class="panel-body">
            <div class="tree" id="remote-tree"></div>
            <div class="file-list" id="remote-files">
              <div class="file-item">
                <span class="file-item-icon">📁</span>
                <span class="file-item-name">..</span>
                <span class="file-item-size"></span>
                <span class="file-item-date"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 传输队列 -->
      <div class="transfer-panel">
        <div class="transfer-header">
          <div class="transfer-tabs">
            <button class="transfer-tab active">全部任务</button>
            <button class="transfer-tab">上传</button>
            <button class="transfer-tab">下载</button>
            <button class="transfer-tab">已完成</button>
            <button class="transfer-tab">失败</button>
          </div>
          <div class="transfer-actions">
            <button class="toolbar-btn" id="clear-completed-btn" title="清除已完成">🧹</button>
            <button class="toolbar-btn" id="open-transfer-page-btn" title="打开传输管理">📊</button>
          </div>
        </div>
        <div class="transfer-list" id="transfer-list">
          <div class="empty-state">暂无传输任务</div>
        </div>
      </div>
    </div>

    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-item">
        <span id="selection-info">选中: 0 文件</span>
      </div>
      <div class="status-item">
        <span class="status-indicator" id="status-indicator"></span>
        <span id="status-text">服务器: 未连接</span>
      </div>
      <div class="status-item" style="margin-left: auto;">
        <span id="runtime">运行时间: 00:00:00</span>
      </div>
    </div>
  </div>

  <script src="../utils/common.js"></script>
  <script src="../scripts/file-browser.js"></script>
</body>
</html>
